import React, { useReducer } from "react";

import ReactDOM from 'react-dom';

function reducer(state, action) {
  // 函数的返回值是新的数据源
  console.log(action, "-------");
  if (action.type === "changeName") {
    return {
      ...state,
      name: action.payload,
    };
  }
  if (action.type === "changeCount") {
    return {
      ...state,
      count: action.payload,
    };
  }
  return state;
}
function App() {

  let [state, dispatch] = useReducer(reducer,
    {
      name: "wade",
      count: 10,
    }
  );
  let { name, count } = state;
  return (
    <div>
      <h1>
        {name} --- {count}
      </h1>
      <button
        onClick={() => {
          console.log('qqqq')
          dispatch({
            type: "changeName",
            payload: name + "lbj",
          })
        }}
      >
        name +
            </button>
      <button
        onClick={() =>
          dispatch({
            type: "changeCount",
            payload: count + 10,
          })
        }
      >
        count +
            </button>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'))
